import { Button, Form, Input, InputNumber, Modal, Select, Space } from 'antd';
import { ComponentPropsBasicType } from './types';
import { useEffect, useState } from 'react';
interface Props extends ComponentPropsBasicType {}
export default function Home({ messageApi, setSpinning }: Props) {
  const [isModalOpen, setIsModalOpen] = useState(false);

  function onBtnComputed() {
    const params = {
      ...form.getFieldsValue(),
    };
    setSpinning(true);
    fetch('/api/ffFiles', {
      method: 'post',
      body: JSON.stringify(params),
    })
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        if (res.msg !== 'success') {
          messageApi.info(res.msg || '');
        } else {
          setIsModalOpen(true);
        }
      })
      .finally(() => {
        setSpinning(false);
      });
  }
  const [form] = Form.useForm();
  function onValuesChange() {
    localStorage.setItem('FF-NEXT-VALUES', JSON.stringify(form.getFieldsValue()));
  }

  const initValue = {
    maxFileNumber: 0,
    minOutputDuration: 10,
    maxOutputDuration: 20,
    minSplitDuration: 100,
    maxSplitDuration: 150,
    identifyExtensions: ['.mp4', '.mkv'],
    outputDir: '',
    inputDir: '',
  };
  useEffect(() => {
    try {
      const ss = JSON.parse(localStorage.getItem('FF-NEXT-VALUES') || '') || {};
      form.setFieldsValue({ ...ss });
    } catch (error) {}
  }, []);
  function splitDurationValid({ getFieldValue }: any) {
    return {
      validator(_: any, value: any) {
        if (value > 0) {
          if (value > getFieldValue('minOutputDuration') && value > getFieldValue('maxOutputDuration')) {
            return Promise.resolve();
          }
        } else {
          return Promise.resolve();
        }
        return Promise.reject(new Error('分割时间必须大于裁剪时间'));
      },
    };
  }
  return (
    <div>
      <Modal title="提示" open={isModalOpen} onCancel={() => setIsModalOpen(false)} footer={false}>
        已经开始剪辑了，请稍等，控制台未提示成功前，请不要再次点击
      </Modal>
      <Form onValuesChange={onValuesChange} form={form} initialValues={initValue} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 1000 }}>
        <Form.Item name="inputDir" label="入口文件夹地址" rules={[{ required: true }]}>
          <Input.TextArea autoSize={{ minRows: 6, maxRows: 12 }} allowClear placeholder="从这里读取文件夹地址，多个换行输入" />
        </Form.Item>
        <Form.Item name="outputDir" label="出口文件夹地址" rules={[{ required: true }]}>
          <Input allowClear placeholder="剪辑完成保存到这个文件夹里面" />
        </Form.Item>
        <Form.Item name="identifyExtensions" label="只识别这些文件后缀" rules={[{ required: true }]}>
          <Select mode="tags" tokenSeparators={[',']} allowClear />
        </Form.Item>
        <Form.Item name="minOutputDuration" label="最小剪辑时长" rules={[{ required: true }]}>
          <InputNumber addonAfter={'剪出来的视频最小时长，单位“秒”'} style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item name="maxOutputDuration" label="最大剪辑时长" rules={[{ required: true }]}>
          <InputNumber addonAfter={'剪出来的视频最大时长，单位“秒”'} style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item name="minSplitDuration" label="最小分割时长" rules={[splitDurationValid]}>
          <InputNumber addonAfter={'原视频分割每一段最小时长，单位“秒”'} style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item name="maxSplitDuration" label="最大分割时长" rules={[splitDurationValid]}>
          <InputNumber addonAfter={'原视频分割每一段最大时长，单位“秒”'} style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item name="maxFileNumber" label="最多处理的文件数量">
          <InputNumber addonAfter="一次最多处理多少个视频" style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Space>
            <Button onClick={onBtnComputed}>开始剪辑</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
}

// ffmpeg -i "C:\短剧\新建文件夹 (2)\天降女儿国40集aa\1.mp4" -ss 10 -t 30 -c copy "C:\短剧\222\output.mp4"

// // ffmpeg -i C:\\短剧\\新建文件夹 (2)\\天降女儿国40集aa.mp4 -ss 10 -t 30 -c copy C:\\短剧\\222\\output.mp4
